<template>
	<div class="bcv-left">
		<ul>
			<li class="first-li active">
				<p class="first-title">
					{{menuName}}
					<span class="arrow"></span>
				</p>
				<ul>
					<router-link v-for="(item,index) in childMenu" :key="index" :to="item.id+''">
						<li :class="aboutChildId==item.id?'second-li active':'second-li'">
							{{item.title}}
						</li>
					</router-link>
				</ul>
			</li>
		</ul>
	</div>
</template>

<script>
	import 	Menu 	from 	"@/service/menu-service.js"
	const 	_menu 	= 		new Menu();
	
	export default{
		data: function(){
			return{
				childMenu 		: {},
				aboutChildId	: ''
			}
		},
		props:[
			'menuId',
			'menuName',
		],
		created (){
			this.findMenuChild(this.menuId);
		},
		watch: {
		    $route( to , from ){   
		       this.aboutChildId = to.params.id==null?this.childMenu[0].id:this.$route.params.id;
		     }
		},
		methods:{
			findMenuChild(id){
				_menu.menuListById({'pid':id}).then((res)=>{
					this.childMenu = res.data;
					this.aboutChildId = this.$route.params.id==null?res.data[0].id:this.$route.params.id;
				},(errMsg)=>{
					console.log(errMsg);
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.bcv-left{
		width: 20%;
		float: left;
		.first-li{
			height: 48px;
			line-height: 48px;
			text-align: center;
		    width: 100%;
		    display: table;
		    .first-title{
		    	position: relative;
		    	border-bottom: 1px solid #e6e6e6;
		    	font-weight: bold;
		    	.arrow{
					background: url(../../../assets/images/arrow2.png);
					width: 13px;
					height: 7px;
					display: inline-block;
					position: absolute;
					top: 50%;
					right: 14px;
				}
		    }
			.second-li{
				color: #666;
				cursor: pointer;
				&.active{
					position: relative;
					border-left: 5px solid #c62e25;
					background: #eeeeee;
					color: #333;
				}
				&.active:after{
					position: absolute;
				    content: "";
				    border-top: 12px solid transparent;
				    border-bottom: 12px solid transparent;
				    border-right: 12px solid #fff;
				    margin-left: -5px;
			        right: -1px;
			        top: 25%;
				}
			}
		}
		.active{
			.first-title{
		    	position: relative;
		    	border-bottom: 1px solid #e6e6e6;
		    	.arrow{
					background: url(../../../assets/images/arrow.png);
					width: 13px;
					height: 7px;
					display: inline-block;
					position: absolute;
					top: 50%;
					right: 14px;
				}
		    }
		}
	}
</style>